
<template>
  <div class="background" style="height: 100vh;display: flex;align-items: center;justify-content: center;background-color: #20ab6c ">
<!--    <div style="display: flex;background-color: white;width: 35%;border-radius: 10px;overflow: hidden">-->
    <div style="display: flex;background-color: white;width: 45%;border-radius: 10px;overflow: hidden">
      <div style="flex: 1;width: 70%">
        <img alt="" src="@/assets/login2.jpeg" style="height:530px;">
      </div>
      <div style="flex: 2;display: flex;align-items:center;justify-content: center">

        <el-form ref="loginRef" :model="form" :rules="currentRules">
          <div style="font-size: 25px; font-weight: bold;text-align:center;padding: 0 0 40px">欢迎登录好租房平台</div>
          <el-tabs v-model="activeName">
            <el-tab-pane label="密码登录" name="first">
              <el-form-item prop="username">
                <el-input v-model="form.username" placeholder="请输入账号" prefix-icon="el-icon-user" size="medium"></el-input>
              </el-form-item>
              <el-form-item prop="password">
                <el-input v-model="form.password" placeholder="请输入密码" prefix-icon="el-icon-lock" show-password size="medium"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button style="background-color: #39AC6A;width: 100%" type="success" @click="loginByPass">登录</el-button>
              </el-form-item>
              <div style="font-size: 13px;display: flex">
                <div style="width: 125px">还没有账号？去 <span style="color: #39AC6A;cursor: pointer" @click="register">注册</span></div>
                <div style="flex: 1;text-align: right" ><span style="color: #39AC6A;cursor: pointer" @click="()=>{this.$router.push('/resetPass')}"><span/>忘记密码</span></div>
              </div>
            </el-tab-pane>

            <el-tab-pane label="邮箱登录" name="second">
              <el-form-item prop="email">
                <el-input v-model="form.email" placeholder="请输入邮箱" prefix-icon="iconfont icon-email1" size="medium"></el-input>
              </el-form-item>
              <el-form-item >
                <el-input v-model="form.emCode" placeholder="请输入验证码" prefix-icon="iconfont icon-yanzhengma4" show-password:false size="medium" style="width: 150px"></el-input>
                <el-button class="ml-5" type="primary" @click="sendCode">发送验证码</el-button>
              </el-form-item>
              <el-form-item>
                <el-button style="background-color: #39AC6A;width: 100%" type="success" @click="loginByEmail">登录</el-button>
              </el-form-item>
            </el-tab-pane>

            <el-tab-pane label="手机登录" name="three">
              <el-form-item prop="phone">
                <el-input v-model="form.phone" placeholder="请输入手机号" prefix-icon="el-icon-phone" size="medium"></el-input>
              </el-form-item>
              <el-form-item prop="emCode">
                <el-input v-model="form.emCode" placeholder="请输入短信验证码" prefix-icon="iconfont icon-Email1" size="medium" style="width: 180px"></el-input>
                <el-button class="ml-5" size="small" type="primary"  @click="sendCode">发送验证码</el-button>
              </el-form-item>
              <el-form-item>
                <el-button style="background-color: #39AC6A;width: 100%" type="success" @click="loginByPhone">登录</el-button>
              </el-form-item>
            </el-tab-pane>

          </el-tabs>

        </el-form>
      </div>
    </div>
  </div>

</template>

<script>
import axios from "axios";

export default {
  name: "Login",

  //修改表单验证规则为动态绑定
  //通过计算属性动态返回对应规则
  computed:{
    currentRules(){
      const rules ={}
      if (this.activeName === 'first'){
        rules.username = [
          {required: true, message: '请输入账号', trigger: 'blur'}
        ]
        rules.password = [
          {required: true, message: '请输入密码', trigger: 'blur'},
          {min: 5, max: 8, message: '密码长度在 5 到 8 个字符', trigger: 'blur'},
        ]
      }else if (this.activeName === 'second'){
        rules.email = [
          {required: true, message: '请输入邮箱', trigger: 'blur'},
          { type: 'email', message: '邮箱格式不正确', trigger: ['blur', 'change'] }
        ]
        rules.emCode = [
          {required: true, message: '请输入邮箱验证码', trigger: 'blur'},
          {min: 4, max: 4, message: '验证码长度为4位', trigger: 'blur'}
        ]
      }else if (this.activeName === 'three'){
        rules.phone = [
          {required: true, message: '请输入手机号', trigger: 'blur'},
          {min: 11, max: 11, message: '长度为11位', trigger: 'blur'},
          { pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
        ]
        rules.newsCode = [
          {required: true, message: '请输入短信验证码', trigger: 'blur'},
          {min: 4, max: 6, message: '验证码长度为4-6位', trigger: 'blur'}
        ]
      }
      return rules
    }
  },

  //切换标签时清除验证的监听
  watch:{
    activeName(){
      this.$nextTick(() => {
        this.$refs['loginRef'].clearValidate()
      })
    }
  },
  data() {
  return{
    activeName: 'first',
    form:{
      username: "",
      password: "",
      email:"",
      emCode:"",
      phone:"",
      newsCode:"",
      ip:'',
      },
    }
  },
  mounted() {
    this.loadIp()
  },
  methods:{
    //获取ip
    loadIp(){
     axios({
       url:"https://api.ipify.cn?format=json",
       method:'get'
     }).then(res=>{
       this.form.ip = res.ip
     })
    },

    /*request.get("https://api.ipify.cn?format=json",{
      params:{}
    }).then(res => {
      data.ip = res.ip;
      request.get("http://whois.pconline.com.cn/ipJson.jsp?ip=" + res.ip + "&json=true", {
        params: {}
      }).then(res1 => {
        console.log("数据:" + JSON.stringify(res1.pro));
      })
    })*/

    //密码登录
    loginByPass(){
      //console.log("当前ip111为：",this.form.ip)
      this.$refs['loginRef'].validate((valid) => {
        if (valid){
          axios({
            url: "http://localhost:8090/user/login/"+this.form.ip,
            method: 'post',
            data: this.form
          }).then(res => {
            console.log(res.data)
            if(res.code === "200"){
              this.$message.success('登录成功,正在跳转...')
              localStorage.setItem("login-user",JSON.stringify(res.data))
              setTimeout(()=>{
                this.$router.push('/');
              },1500)

            } else {
              this.$message.error(res.msg)
            }
          })
        }
      })
    },

    //发送验证码
    sendCode(){
      axios({
        url:'/code/sendCode',
        method:'get',
      }).then(res=>{
        if (res.code === '200'){
          this.form.emCode = res.data
          console.log("返回的验证码为：",res.data)
        }else {
          this.$message.error(res.msg)
        }
      })
    },

    //邮箱登录
    loginByEmail(){
      this.$refs['loginRef'].validate((valid) => {
        if (valid) {
          axios({
            url:'/user/loginByEmail/'+this.form.ip,
            method:'post',
            data:{
              email:this.form.email,
              emCode:this.form.emCode
            }
          }).then(res=>{
            if (res.code === '200'){
              this.$message.success('登录成功,正在跳转...')
              localStorage.setItem("login-user",JSON.stringify(res.data))
              setTimeout(()=>{
                this.$router.push('/');
              },1500)
            }
          })
        }
      })
    },

    //电话号码登录
    loginByPhone(){
      this.$refs['loginRef'].validate((valid) => {
        if (valid) {
          axios({
            url:'/user/loginByPhone/'+this.form.ip,
            method:'post',
            data:{
              phone:this.form.phone,
              emCode:this.form.emCode
            }
          }).then(res=>{
            if (res.code === '200'){
              this.$message.success('登录成功,正在跳转...')
              localStorage.setItem("login-user",JSON.stringify(res.data))
              setTimeout(()=>{
                this.$router.push('/');
              },1500)
            }
          })
        }
      })
    },

    //跳转到注册页面
    register() {
      this.$router.push('/register');
    },
  }
}
</script>

<style scoped>
.background{
  background-image: url("@/assets/backgroundplus.jpg");
  background-repeat: no-repeat;

}
</style>


